<template>
  <div class="userManagement-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="24">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item :label="$t('statistics.princessName') /*分组名称*/">
            <el-select
              v-model="queryForm.region"
              :placeholder="$t('order.pleaseSelOrderType') /*请选择订单类型*/"
            >
              <el-option label="正常" value="shanghai"></el-option>
              <el-option label="注销" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('statistics.date') /*日期*/">
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker
                  v-model="queryForm.date"
                  type="date"
                  :placeholder="$t('statistics.selDate') /*选择日期*/"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item :label="$t('statistics.deviceAccount') /*设备账号*/">
            <el-input
              v-model.trim="queryForm.DailAccount"
              :placeholder="
                $t('statistics.pleaseEditDeviceAccount') /*请输入设备账号*/
              "
              clearable
            />
          </el-form-item>

          <el-form-item :label="$t('order.name') /*玩法*/">
            <el-select
              v-model="queryForm.region"
              :placeholder="$t('statistics.pleaseSelTypes') /*请选择玩法*/"
            >
              <el-option label="正常" value="shanghai"></el-option>
              <el-option label="注销" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('statistics.numberOfTimes') /*场次*/">
            <el-select
              v-model="queryForm.region"
              :placeholder="$t('statistics.pleaseNumberOfTimes') /*请选择场次*/"
            >
              <el-option label="正常" value="shanghai"></el-option>
              <el-option label="注销" value="beijing"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">
              {{ $t('common.search') /*查询*/ }}
            </el-button>
            <el-button icon="el-icon-search" type="primary" @click="queryData">
              {{ $t('common.output') /*导出*/ }}
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-left-panel>

      <vab-query-form-left-panel :span="24">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <!-- <el-form-item label="租户账号">
            <el-input
              v-model.trim="queryForm.account"
              placeholder="请输入租户账号"
              clearable
              disabled
            />
          </el-form-item> -->
          <el-form-item :label="$t('order.startAndEndTime') /*起止时间*/">
            <el-date-picker
              v-model="queryForm.date2"
              type="datetimerange"
              :picker-options="pickerOptions"
              :range-separator="$t('order.to') /*至*/"
              :start-placeholder="$t('order.beginDate') /*开始日期*/"
              :end-placeholder="$t('order.endDate') /*结束日期*/"
              align="right"
            ></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-tag>{{ $t('order.today') /*今日*/ }}</el-tag>
            <el-tag type="success">{{ $t('order.yesterday') /*昨天*/ }}</el-tag>
            <el-tag type="info">{{ $t('order.thisMonth') /*本月*/ }}</el-tag>
            <el-tag type="warning">{{ $t('order.thisYear') /*本年*/ }}</el-tag>
          </el-form-item>
        </el-form>
      </vab-query-form-left-panel>
    </vab-query-form>
    <!-- <div class="card-list">
      <el-row :gutter="20">
        <el-col v-for="o in 6" :key="o" :span="4">
          <el-card class="box-card card-item">
            <div class="card-item-detail">
              <span class="title item-text">租户账号：</span>
              <span class="value item-text">购买月数*购买数量</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div> -->

    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin: 20px 0"
    >
      <el-table-column
        prop="id"
        :label="$t('accountManage.number') /*号码*/"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="name"
        :label="$t('accountManage.money') /*金额*/"
      ></el-table-column>
      <el-table-column prop="id" label="号码" width="180"></el-table-column>
      <el-table-column prop="name" label="金额"></el-table-column>
      <el-table-column prop="id" label="号码" width="180"></el-table-column>
      <el-table-column prop="name" label="金额"></el-table-column>
      <el-table-column prop="id" label="号码" width="180"></el-table-column>
      <el-table-column prop="name" label="金额"></el-table-column>
      <!-- <el-table-column prop="amount1" label="数值 1（元）"></el-table-column>
      <el-table-column prop="amount2" label="数值 2（元）"></el-table-column>
      <el-table-column prop="amount3" label="数值 3（元）"></el-table-column> -->
    </el-table>

    <el-table
      v-loading="listLoading"
      :data="list"
      :element-loading-text="elementLoadingText"
      @selection-change="setSelectRows"
    >
      <!-- <el-table-column show-overflow-tooltip type="selection"></el-table-column> -->
      <el-table-column
        show-overflow-tooltip
        prop="datatime"
        :label="$t('statistics.date') /*日期*/"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="account"
        :label="$t('statistics.totalAmoutCode') /*特码总额*/"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="account"
        :label="$t('statistics.generalManageAdd') /*加奖总额*/"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="account"
        :label="$t('statistics.totalMoney') /*金额总计*/"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="account"
        :label="$t('statistics.specialCodeExtraction') /*特码抽成*/"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="account"
        :label="$t('statistics.additiveExtraction') /*加奖抽成*/"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="account"
        :label="$t('statistics.winningAmount') /*中奖金额*/"
      ></el-table-column>

      <el-table-column
        show-overflow-tooltip
        prop="remark"
        :label="$t('statistics.balance') /*结余*/"
      ></el-table-column>

      <!-- <el-table-column show-overflow-tooltip label="操作" width="300">
        <template #default="{ row }">
          <el-button type="text" @click="handleEdit(row)">查看详情</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNo"
      :page-size="queryForm.pageSize"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
    <edit ref="edit" @fetch-data="fetchData"></edit>
  </div>
</template>

<script>
  import { doDelete, getList } from '@/api/userManagement'
  import userData from '@/views/accountManagement/userManagement/data.json'
  import Edit from './components/UserManagementEdit'
  export default {
    name: 'UserManagement',
    components: { Edit },
    data() {
      return {
        tableData: [
          {
            id: '12987122',
            name: '王小虎',
            amount1: '234',
            amount2: '3.2',
            amount3: 10,
          },
          {
            id: '12987123',
            name: '王小虎',
            amount1: '165',
            amount2: '4.43',
            amount3: 12,
          },
          {
            id: '12987124',
            name: '王小虎',
            amount1: '324',
            amount2: '1.9',
            amount3: 9,
          },
          {
            id: '12987125',
            name: '王小虎',
            amount1: '621',
            amount2: '2.2',
            amount3: 17,
          },
          {
            id: '12987126',
            name: '王小虎',
            amount1: '539',
            amount2: '4.1',
            amount3: 15,
          },
        ],
        list: null,
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        elementLoadingText: '正在加载...',
        queryForm: {
          pageNo: 1,
          pageSize: 10,
          username: '',
          date1: [
            new Date(2000, 10, 10, 10, 10),
            new Date(2000, 10, 11, 10, 10),
          ],
          date2: '',
        },
        pickerOptions: {
          shortcuts: [
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              },
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              },
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              },
            },
          ],
        },
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {
          if (columnIndex === 0) {
            return [1, 2]
          } else if (columnIndex === 1) {
            return [0, 0]
          }
        }
      },

      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex % 2 === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1,
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0,
            }
          }
        }
      },
      setSelectRows(val) {
        this.selectRows = val
      },
      handleEdit(row) {
        if (row.id) {
          this.$refs['edit'].showEdit(row)
        } else {
          this.$refs['edit'].showEdit()
        }
      },
      handleDelete(row) {
        if (row.id) {
          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await doDelete({ ids: row.id })
            this.$baseMessage(msg, 'success')
            this.fetchData()
          })
        } else {
          if (this.selectRows.length > 0) {
            const ids = this.selectRows.map((item) => item.id).join()
            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
              const { msg } = await doDelete({ ids })
              this.$baseMessage(msg, 'success')
              this.fetchData()
            })
          } else {
            this.$baseMessage('未选中任何行', 'error')
            return false
          }
        }
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const { data, totalCount } = userData || (await getList(this.queryForm))
        console.log(data, totalCount, '获取数据')
        this.list = data
        this.total = totalCount
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .box-card {
    .card-item-detail {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .item-text {
        padding: 6px 0;
      }
    }
  }
</style>
